<template>
  <n-scrollbar max-h-360>
    <n-list>
      <n-list-item
        v-for="(item, index) in list"
        :key="item.id"
        cursor-pointer
        hover="bg-#f6f6f6"
        dark="hover:bg-dark"
        @click="handleRead(index)"
      >
        <n-thing px-15 :class="{ 'op-30': item.isRead }">
          <template #avatar>
            <n-avatar v-if="item.avatar" :src="item.avatar" />
            <svg-icon
              v-else
              text="34 primary"
              :icon="item.icon"
              :local-icon="item.svgIcon"
            />
          </template>
          <template #header>
            <n-ellipsis :line-clamp="1">
              {{ item.title }}
              <template #tooltip>
                {{ item.title }}
              </template>
            </n-ellipsis>
          </template>
          <template v-if="item.tagTitle" #header-extra>
            <n-tag v-bind="item.tagProps" size="small">{{
              item.tagTitle
            }}</n-tag>
          </template>
          <template #description>
            <n-ellipsis v-if="item.description" :line-clamp="2">
              {{ item.description }}
            </n-ellipsis>
            <p>{{ item.date }}</p>
          </template>
        </n-thing>
      </n-list-item>
    </n-list>
  </n-scrollbar>
</template>
<script lang="ts" setup>
import { MessageList } from '../../type';
interface Props {
  list?: MessageList[];
}

withDefaults(defineProps<Props>(), {
  list: () => [],
});

interface Emits {
  (e: "read", val: number): void;
}

const emit = defineEmits<Emits>();

function handleRead(index: number) {
  emit("read", index);
}
</script>
